<template>
    <el-form ref="form" :model="form" label-width="80px">
        <el-row :gutter="20">
            <el-col :span="24" class="information-title">
                <span class="information-span">{{form.roomName}}</span>房间的基本信息
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="房间编码:">
                    <el-input v-model="form.roomCode"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="房间名称:">
                    <el-input v-model="form.roomName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="房间户型:">
                    <el-select v-model="form.roomApartment" placeholder="请选择房间户型">
                        <el-option v-for="roomApartmentItem in roomApartmentItems" :label="roomApartmentItem.label" :value="roomApartmentItem.value" :key="roomApartmentItem.value"></el-option>
                        <!--el-option label="2室1厅" value="1"></el-option>
                        <el-option label="2室2厅" value="2"></el-option>
                        <el-option label="3室1厅" value="3"></el-option>
                        <el-option label="3室2厅" value="4"></el-option-->
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
               <el-form-item label="房间装修:">
                    <el-select v-model="form.roomRenovation" placeholder="请选择房间装修">
                        <el-option v-for="roomRenovationItem in roomRenovationItems" :label="roomRenovationItem.label" :value="roomRenovationItem.value" :key="roomRenovationItem.value"></el-option>
                        <!--el-option label="精装" value="1"></el-option>
                        <el-option label="简装" value="2"></el-option>
                        <el-option label="毛坯" value="2"></el-option-->
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="房间朝向:">
                    <el-select v-model="form.roomOrientation" placeholder="请选择房间朝向">
                        <el-option v-for="roomOrientationItem in roomOrientationItems" :label="roomOrientationItem.label" :value="roomOrientationItem.value" :key="roomOrientationItem.value"></el-option>
                        <!--el-option label="坐北朝南" value="1"></el-option>
                        <el-option label="坐南朝北" value="2"></el-option-->
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="楼层数:">
                   <el-input v-model="form.roomFloor"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="建筑面积:">
                    <el-input v-model="form.roomArea"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="使用面积:">
                    <el-input v-model="form.roomArea_1"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="车牌号:">
                    <el-input v-model="form.roomLicensePlate"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="房间状态:">
                    <el-input v-model="form.roomState"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="物业类型:">
                    <el-input v-model="form.propertyType"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="房间性质:">
                    <el-input v-model="form.roomType"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        
    </el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          roomCode: '',
          roomName: '',
          roomApartment: '',
          roomOrientation: '',
          roomRenovation: '',
          roomFloor: '',
          roomArea: '',
          roomArea_1: '',
          roomLicensePlate: '',
          roomState: '',
          propertyType: '',
          roomType: '',
        },
        roomApartmentItems: [
            {"label":"2室1厅","value":1},
            {"label":"2室2厅","value":2},
            {"label":"3室1厅","value":3},
            {"label":"3室2厅","value":4},
        ],
        roomRenovationItems: [
            {"label":"精装","value":1},
            {"label":"简装","value":2},
            {"label":"毛坯","value":3},
        ],
        roomOrientationItems: [
            {"label":"坐南朝北","value":1},
            {"label":"坐北朝南","value":2}
        ]
      }
    },
    props: {
      informationData: {
        type: Object,
        default () {
          return false
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    },
    watch: {
        informationData: {
            immediate: true,    // 这句重要
            handler (newName, oldName) {
                this.form.roomCode = newName.roomCode;
                this.form.roomName = newName.roomName;
                this.form.roomApartment = newName.roomApartment;
                this.form.roomOrientation = newName.roomOrientation;
                this.form.roomRenovation = newName.roomRenovation;
                this.form.roomFloor = newName.roomFloor;
                this.form.roomArea = newName.roomArea;
                this.form.roomArea_1 = newName.roomArea_1;
                this.form.roomLicensePlate = newName.roomLicensePlate;
                this.form.roomState = newName.roomState;
                this.form.propertyType = newName.propertyType;
                this.form.roomType = newName.roomType;
            }
        }
    }
  }
</script>
<style scoped>
    .information-title{
        height: 40px;
        line-height: 20px;
        margin-bottom: 20px;
        padding: 10px;
        background-color: #f8f8f8;    
    }
    .information-span{
        color: green;
    }
</style>
